import echarts from 'echarts'

class RingChart {
  /**
   * AGV状态饼图对象
   * @param {string} containerID -渲染的目标dom的id值
   */
  constructor(containerID) {
    // 初始化echarts图表
    this.chart = echarts.init(document.getElementById(containerID));
    // 初始化图表数据对象
    this.options = {
      title: {
        text: 'AGV状态统计',
        left: '42%',
        textStyle: {
          color: 'white',
          fontWeight: 600,
          fontSize: 14
        }
      },
      color: ['#64c88c', '#4c9bfd', 'orange', 'red'],
      legend: {
        orient: 'vertical',
        left: 0,
        top: 15,
        textStyle: {
            color: 'white',
            fontSize: 12
        },
      },
      series: [
        {
          name: '车辆状态',
          type: 'pie',
          center: ['55%', '55%'],
          radius: ['35%', '75%'],
          avoidLabelOverlap: false,
          label: {
            position: 'inner',
            formatter: ' {per|{d}%} \n\n {c} ',
            rich: {
              b: {
                fontSize: 12,
                fontWeight: 400,
                color: 'white',
                lineHeight: 33
              },
              c: {
                fontSize: 22
              },
              per: {
                color: 'white',
                backgroundColor: '#fff',
                padding: [2, 2],
                borderRadius: 2
              }
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {value: null, name: '运行中'},
            {value: null, name: '空闲中'},
            {value: null, name: '充电中'},
            {value: null, name: '故障异常'}
          ]
        }
      ]
    };
    this.chart.setOption(this.options);
  }
  /**
   * 修改图表指定项的数据
   * @param {string} tag -设置的标签名
   * @param {number} val -设置数值
   */
  setData(tag, val) {
    let _index = this.options.series[0].data.map(d => d.name).indexOf(tag);
    if(_index === -1) {
      return;
    }
    this.options.series[0].data[_index].value = val;
    if(val === 0) {
      this.options.series[0].data[_index].value = null;
    }
    this.chart.setOption(this.options);
  }
}

class HistChart {
  /**
   * AGV运输量柱图对象
   * @param {string} containerID -渲染的目标dom的id值
   */
  constructor(containerID) {
    this.chart = echarts.init(document.getElementById(containerID));
    this.options = {
      grid: {
        y2: '10%'
      },
      title: {
        left: 'center',
        text: 'AGV日运输量',
        textStyle: {
          color: 'white',
          fontWeight: 600,
          fontSize: 14
        }
      },
      xAxis: {
        data: ['曲轴', '滚子', '上法兰', '下法兰', '气缸'],
        axisLabel: {
            textStyle: {
                color: '#fff'
            }
        }
      },
      yAxis: {
        name: '单位：个',
        nameTextStyle: {
          color: '#fff'
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
      },
      series: [
          {
              type: 'bar',
              itemStyle: {
                  color: 'rgba(255,255,255,0.05)'
              },
              barGap: '-100%',
              barCategoryGap: '40%',
              data: [100, 100, 100, 100, 100]
          },
          {
              type: 'bar',
              label: {
                show: true,
                color: 'white',
                fontSize: 14,
                position: 'top'
              },
              itemStyle: {
                  color: new echarts.graphic.LinearGradient(
                      0, 0, 0, 1,
                      [
                          {offset: 0, color: '#83bff6'},
                          {offset: 0.5, color: '#188df0'},
                          {offset: 1, color: '#188df0'}
                      ]
                  )
              },
              emphasis: {
                  itemStyle: {
                      color: new echarts.graphic.LinearGradient(
                          0, 0, 0, 1,
                          [
                              {offset: 0, color: '#2378f7'},
                              {offset: 0.7, color: '#2378f7'},
                              {offset: 1, color: '#83bff6'}
                          ]
                      )
                  }
              },
              data: []
          }
      ]
    };
    this.chart.setOption(this.options);
  }
  /**
   * 修改图表指定项的数据
   * @param {string} tag -设置的标签名
   * @param {number} val -设置数值
   */
  setData(tag, val) {
    let _index = this.options.xAxis.data.indexOf(tag);
    if(_index === -1) {
      return;
    }
    this.options.series[1].data[_index] = val;
    this.chart.setOption(this.options);
  }
}

class LineChart {
  /**
   * AGV稼动率折线图对象
   * @param {string} containerID -渲染的目标dom的id值
   */
  constructor(containerID) {
    this.chart = echarts.init(document.getElementById(containerID));
    this.options = {
      color: '#4D96F6',
      grid: {
        x2: '12%',
        y2: '10%'
      },
      title: {
        left: 'center',
        text: 'AGV系统稼动率',
        textStyle: {
          color: 'white',
          fontWeight: 600,
          fontSize: 14
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1h', '3h', '5h', '7h', '9h', '11h',
        '13h', '15h', '17h','19h', '21h', '23h'],
        axisLabel: {
          textStyle: {
              color: '#fff'
          }
        }
      },
      yAxis: {
        type: 'value',
        name: '单位：%',
        nameTextStyle: {
          color: '#fff'
        },
        axisLabel: {
            formatter: '{value}',
            textStyle: {
                color: '#fff'
            }
        },
        max: 100,
        min: -100
      },
      series: [
        {
            name: '最高气温',
            type: 'line',
            smooth: true,
            symbolSize:8,
            data: [],
            markPoint: {
                data: [
                    { type: 'max', name: '最大值', itemStyle: {color: '#F26F39'} },
                    { type: 'min', name: '最小值', itemStyle: {color: '#48B8DE'} }
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
      ]
    };
    this.chart.setOption(this.options);
  }
  /**
   * 修改并刷新所有数据
   * @param {Array} dataList -通过数组对所有存在数据进行赋值
   */
  setDataList(dataList) {
    this.options.series[0].data = dataList;
    this.chart.setOption(this.options);
  }
  /**
   * 修改图表指定项的数据
   * @param {string} tag -设置的标签名
   * @param {number} val -设置数值
   */
  setData(tag, val) {
    let _index = this.options.xAxis.data.indexOf(tag);
    if(_index === -1) {
      return;
    }
    this.options.series[0].data[_index] = val;
    this.chart.setOption(this.options);
  }
}

export {
  RingChart,
  HistChart,
  LineChart
}